<template>
	<div class="comments-container">
		<!-- 评论输入框 -->
		<div class="comment-input">
			<textarea v-model="newComment" placeholder="发表你的评论..." class="comment-textarea"></textarea>
			<button @click="submitComment" class="submit-button">发布</button>
		</div>

		<!-- 评论列表 -->
		<div class="comment-list">
			<div v-for="(comment, index) in comments" :key="index" class="comment-item">
				<div class="comment-header">
					<span class="comment-author">{{ comment.nickName }}</span>
					<span class="comment-time">{{ comment.communityComment.commentTime }}</span>
				</div>
				<div class="comment-content">{{ comment.communityComment.content }}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		saveCommunityComment,
		communityCommentList
	} from "@/api/community.js";
	export default {
		name: "Comments",
		data() {
			return {
				newComment: "", // 新评论的内容
				comments: [
					// 示例评论数据
					{
						author: "张三",
						time: "2025-04-27 14:30",
						content: "这个运动搭子真不错！"
					},
					{
						author: "李四",
						time: "2025-04-27 15:00",
						content: "下次一起约运动吧！"
					},
					{
						author: "用户",
						time: "2025-04-28 12:47:10",
						content: "你好"
					}
				],
				postId: ""
			};
		},
		onLoad(option) {
			this.postId = option.postId;
			const data = {
				communityId: this.postId,
			}
			this.getCommentList(data);
		},
		methods: {
			getCommentList(data) {
				communityCommentList(data).then(res => {
					this.comments = res.rows
				})
			},
			submitComment() {
				if (this.newComment.trim() === "") {
					alert("评论不能为空！");
					return;
				}
				const data = {
					content: this.newComment,
					communityId: this.postId
				}
				saveCommunityComment(data).then(res => {
					if (res.code !== 200) {
						uni.showToast({
							title: '发表失败',
							icon: 'error',
							duration: 1500,
							style: `
						        border: 1px solid #6699cc;
						        background-color: #e6f2ff;
						        color: #333;
						    `
						});
					} else {
						this.getCommentList({
							communityId: this.postId
						})
						uni.showToast({
							title: '发表成功',
							icon: 'success',
							duration: 1500,
							style: `
						        border: 1px solid #6699cc;
						        background-color: #e6f2ff;
						        color: #333;
						    `
						});
					}
				})
				// 添加新评论
				this.comments.push({
					author: "用户", // 这里可以替换为当前登录用户的名称
					time: this.getCurrentTime(),
					content: this.newComment
				});
				// 清空输入框
				this.newComment = "";
			},
			getCurrentTime() {
				const now = new Date();
				return now.toISOString().replace("T", " ").substring(0, 19);
			}
		}
	};
</script>

<style scoped>
	.comments-container {
		max-width: 100%;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 16px;
		/* 增加圆角半径 */
		background-color: #f9f9f9;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.comment-input {
		display: flex;
		margin-bottom: 20px;
		align-items: flex-start;
	}

	.comment-textarea {
		flex: 1;
		min-height: 80px;
		padding: 10px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		/* 增加圆角半径 */
		resize: none;
		margin-right: 10px;
	}

	.submit-button {
		padding: 10px;
		background-color: #4CAF50;
		color: white;
		border: none;
		border-radius: 14px;
		/* 增加圆角半径 */
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.submit-button:hover {
		background-color: #45a049;
	}

	.comment-list {
		list-style: none;
		padding: 0;
	}

	.comment-item {
		border: 1px solid #e0e0e0;
		border-radius: 14px;
		/* 增加圆角半径 */
		padding: 15px;
		margin-bottom: 10px;
		background-color: #ffffff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.comment-item:last-child {
		margin-bottom: 0;
	}

	.comment-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.comment-author {
		font-weight: bold;
		color: #333333;
	}

	.comment-time {
		font-size: 0.85em;
		color: #999999;
	}

	.comment-content {
		margin-top: 5px;
		font-size: 1em;
		color: #333333;
	}
</style>